import { Table, Button, Select, Space, Modal,Form,Switch,Input,message } from 'antd';
import React, { useState, useEffect } from 'react';
import axios from '../../../../../http/index'
import 'antd/dist/antd.css'
import '../css/index.scss'
import Edit2 from '../edit2'
import { ExclamationCircleOutlined } from '@ant-design/icons';


export default function Classification() {
     // 表格数据
     const [data,setdata] = useState([])
     console.log(data);
    // 数据请求
    const datas = () => {
        axios({
            method: "GET",
            url: '/system/invitation/invitationmanagement/queryHelpCenter',
            params:{
                currentPage:'1',
                pageSize:'300',
            }
        })
            .then((res) => {
                let datas = res.data.data
                datas = datas.filter((item) => item.dynamic === 1)
                for (let i = 0; i < datas.length; i++) {
                    datas[i].key = datas[i].id
                }
                setdata([...datas])
                console.log(res);
            })
            .catch((err) => {
                console.log(err);
            })
    }
    useEffect(() => {
     datas()
    }, []);

    const onFinish = (values) => {
        console.log(values);
    };
    // 添加弹窗表单的内部内容分布
    const layout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
    };
    // 添加弹窗警告提示
    const validateMessages = {
        required: '这是必填项哦',
        types: {
            email: '${label} is not a valid email!',
            number: '${label} is not a valid number!',
        },
        number: {
            range: '${label}必须大于${min}小于${max}',
        },

    };
    
    // 表格
    const columns = [
        {
            title: '编号',
            dataIndex: 'helpcenter_number',
            align: 'center',
            key: 'helpcenter_number',
        },
        {
            title: '分类名称',
            dataIndex: 'classification',
            align: 'center',
            key: 'classification',
        },
        {
            title: '专题数量',
            dataIndex: 'elpcenter_show',
            align: 'center',
            key: 'elpcenter_show',
        },
        {
            title: '是否显示',
            dataIndex: 'see',
            align: 'center',
            key: 'see',
            render(text) {
                return  text === 0 ? '是' : '否'
            }
        },
        {
            title: '发布时间',
            dataIndex: 'release_time',
            align: 'center',
            key: 'release_time',
        },
        {
            title: '操作',
            dataIndex: 'key',
            key: 'title',
            align: 'center',
            render: text => <div><Space><Button size="small" onClick={() => edit(text)}>编辑</Button><Button size="small" type="dashed" danger onClick={() => dels(text)}>删除</Button></Space></div>,
        },
    ];
    const [seedatas,setseedatas] = useState({})

      // 传给编辑弹窗的方法
      const edits = ()  => {
        setadd2(false)
    }
    // 编辑
    const edit = (text) => {
        console.log(text);
        let a = data.filter((item) => item.id === text)
        setseedatas(() => a[0])
        setadd2(true)
    }
    const { confirm } = Modal;
    const dels = (text) => {
        axios({
            method: "GET",
            url: '/system/invitation/invitationmanagement/deleteHelpCenter',
            params: {
                id:String(text),
            }
        })
            .then((res) => {
                console.log(123,res);

                confirm({
                    title: '真的确认删除吗?',
                    icon: <ExclamationCircleOutlined />,
                    content: '删除之后将无法恢复!',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                      console.log('OK');
                      datas()
                        if(res.data.code === 200){
                            message.success('删除成功');
                        }else{
                        message.error('删除出错');
                        }
                    },
                    onCancel() {
                      console.log('Cancel');
                    },
                  });
               
            })
            .catch((err) => {
                console.log(err);
                message.error('删除出错');
            })
    }
   
   
    // 添加
    const [add, setadd] = useState(false)
    // 编辑
    const [add2, setadd2] = useState(false)

    // 分类标题
    const couponName = () => {

    }
    // 是否显示
    const [seedata,setseedata] = useState('0')
    const see = (e) => {
    if(e === true){
        setseedata('1')
    }else{
        setseedata('0')

    }
    }
     // 提交
     const [form] = Form.useForm();
     const submits = async () => {
         try {
           const values = await form.validateFields();
           axios({
             method: "GET",
             url: '/system/invitation/invitationmanagement/addHelpCenterEditing',
             params:{
                 classification:values.gender,
                 cover_photo:'',
                 elpcenter_show:seedata,
             }
         })
             .then((res) => {
                 console.log(res);
                 datas()
                 setadd(() => false)
                 message.success('添加成功');
             })
             .catch((err) => {
                 console.log(err);
                 message.error('添加失败');
             })
         } catch (errorInfo) {
           console.log('Failed:', errorInfo);
         }
       };
        // 编辑提交
     const submits2 = async () => {
         try {
           const values = await form.validateFields();
           axios({
             method: "GET",
             url: '/system/invitation/invitationmanagement/addHelpCenterEditing',
             params:{
                 classification:values.gender,
                 cover_photo:'',
                 elpcenter_show:seedata,
             }
         })
             .then((res) => {
                 console.log(res);
                 datas()
                 setadd(() => false)
                 message.success('添加成功');
             })
             .catch((err) => {
                 console.log(err);
                 message.error('添加失败');
             })
         } catch (errorInfo) {
           console.log('Failed:', errorInfo);
         }
       };
    return (
        <div className="from" style={{ margin: 0 }}>
            <div className="bg">
                <span className="text">数据列表</span>
                <Button style={{ marginRight: 15 }} onClick={() => setadd(true)}>添加</Button>
            </div>
            <Table bordered columns={columns} dataSource={data} />

            <Modal
                getContainer={false}
                title="分类管理"
                centered
                visible={add}
                onOk={() => setadd(false)}
                onCancel={() => setadd(false)}
                width={800}
                footer={null}
            >
                <Form {...layout} name="nest-messages"
                    onFinish={onFinish}
                    validateMessages={validateMessages}
                    form={form}
                >
                    <Form.Item name='couponName' label="帮助标题" rules={[{ required: true }]}>
                        <Input onBlur={couponName} placeholder="请输入帮助标题" />
                    </Form.Item>
                    <Form.Item name='see' label="显示设置" valuePropName="checked">
                        <Switch checkedChildren="是" unCheckedChildren="否" defaultChecked onChange={see} type='checked' />
                    </Form.Item>
                    <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }} >
                    <Button type="primary" htmlType="submit" onClick={submits}>
                        提交
                    </Button>
                </Form.Item>
                </Form>
            </Modal>

            <Modal
                getContainer={false}
                title="分类管理"
                centered
                visible={add2}
                onOk={() => setadd2(false)}
                onCancel={() => setadd2(false)}
                width={800}
                footer={null}
            >
                  <Edit2 seedatas={seedatas} edits={edits}/>
            </Modal>
        </div>
    )
}
